<template>
	<view>
		<!-- 提现 提现记录 -->
		<cus-navbar navbar :title="$t('index36')" :rightText="$t('index103')" url="/pages/wallet/withdrawLog"></cus-navbar>
		<view class="main-padding">
			<view class="gap-30"></view>
			<view class="main-card flex justify-between align-center size-28">
				<!-- 币种 -->
				<view class="color-71">{{$t('index79')}}</view>
				<view class="">USDT</view>
			</view>
			<view class="main-card flex justify-between align-center size-28 mt-14">
				<!-- 链 -->
				<view class="color-71">{{$t('index80')}}</view>
				<view class="">{{chain_name}}</view>
			</view>
			<view class="main-card mt-20 size-26">
				<view class="flex justify-between align-center mb-24">
					<!-- 提现类型 -->
					<view>{{$t('index104')}}</view>
					<picker :range="range" range-key="name" @change="pickerChange">
						<view class="flex align-center">
							<view class="">{{range[current].name}}</view>
							<image src="../../static/imgs/18.png" class="img-20 ml-10"></image>
						</view>
					</picker>
				</view>
				<template v-if="current==0">
					<view class="with-card flex justify-between align-center">
						<!-- 本金金额 -->
						<view class="color-71">{{$t('index105')}}</view>
						<!-- 请输入本金金额 -->
						<input type="digit" v-model="amount" :placeholder="$t('index106')" placeholder-class="color-71 size-26"
							class="flex-1 size-26 text-right" />
					</view>
					<!-- 提现地址 -->
					<view class="mt-30 mb-24">{{$t('index107')}}</view>
					<view class="with-card flex justify-between align-center">
						<!-- 请输入提现地址 -->
						<input type="text" v-model="address" :placeholder="$t('index108')" placeholder-class="color-71 size-26"
							class="flex-1 size-26" />
					</view>
					<view class="with-card flex justify-between align-center mt-20">
						<!-- 手续费 -->
						<view class="color-71">{{$t('index109')}}</view>
						<view class="size-26 flex-shrink ml-30">{{info.withdraw_rate_balance1||0}}USDT</view>
					</view>
				</template>
				<template v-else>
					<view class="with-card flex justify-between align-center">
						<!-- 收益金额 -->
						<view class="color-71">{{$t('index110')}}</view>
						<!-- 请输入收益金额 -->
						<input type="digit" v-model="amount" :placeholder="$t('index111')" placeholder-class="color-71 size-26"
							class="flex-1 size-26 text-right" />
					</view>
					<!-- 提现地址 -->
					<view class="mt-30 mb-24">{{$t('index107')}}</view>
					<view class="with-card flex justify-between align-center">
						<!-- 请输入提现地址 -->
						<input type="text" v-model="address" :placeholder="$t('index108')" placeholder-class="color-71 size-26"
							class="flex-1 size-26" />
					</view>
					<view class="with-card flex justify-between align-center mt-20">
						<view class="color-71">AFH</view>
						<view class="size-26 flex-shrink ml-30">{{current==1?info.withdraw_rate_balance4:info.withdraw_rate_balance2}}%</view>
					</view>
				</template>
			</view>
			<cus-dialog ref="unActive" :title="$t('common_8')" :btnTxt="$t('common_2')" @confrim="goActive">
				<!-- 您还未激活账号，无法操作 -->
				<view class="text-center color-81 size-28">{{btnTxt}}</view>
			</cus-dialog>
			<!-- 确认 -->
			<button class="main-btn mt-60" @click="submit">{{$t('common_2')}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				info: {},
				amount: '',
				address: '',
				chain_name:'--',
				btnTxt:''
			}
		},
		computed: {
			range() {
				return [{
						name: this.$t('index117'),// USDT提现
						value: 1
					},
					{
						name: this.$t('index118'),// 收益提现
						value: 2
					},
					{
						name: this.$t('index120'),// AFH提现
						value: 3
					}
				]
			}
		},
		onLoad() {
			this.$api.post('/data/api.data/chain').then(res=>{
				this.chain_name = res.chain_name
			})
			this.loadData()
		},
		methods: {
			loadData() {
				this.$api.post('/data/api.auth.invest/withdrawInfo').then(res => {
					this.info = res
				})
			},
			goActive() {
				this.$refs.unActive.close()
				if (!this.amount) {
					uni.showToast({
						title: this.$t('index113'),// 请输入提现金额
						icon: "none"
					})
					return
				}
				if (!this.address) {
					uni.showToast({
						title: this.$t('index108'),// 请输入提现地址
						icon: "none"
					})
					return
				}
				this.$api.post('/data/api.auth.invest/withdrawSub', {
					price: this.amount,
					address: this.address,
					type: this.range[this.current].value
				}).then(res => {
					uni.showToast({
						title: this.$t('index58')// 提交成功
					})
					this.amount = ''
					this.address = ''
				})
			},
			pickerChange(e) {
				this.current = e.detail.value
				this.amount = ''
				this.address = ''
			},
			submit() {
				this.$refs.unActive.open()
				this.btnTxt = this.$t('common_7')+this.range[this.current].name+'?'
				return
				
			}
		}
	}
</script>

<style lang="scss">
	.with-card {
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #15151B;
	}
</style>